<template>
  <div data-v-topnav123 class="main">
    <div class="search-box">
      <div class="search-inner">
        <el-input
          class="search-input"
          placeholder="发现更多有趣的事情"
          v-model="searchValue"
          @keyup.enter.native="toSearch"
        >
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
    </div>
    <div class="menu-box">
      <div class="menu-inner">
        <el-popover class="touxiang" placement="top" trigger="hover">
          <div style="text-align: center; margin: 0">
            <div class="hide-logout">
              <span class="iconfont el-icon-switch-button" @click="logout"
                >退出</span
              >
            </div>
          </div>
          <img
            slot="reference"
            :src="imgUrl + '?x-oss-process=image/format,webp/quality,q_20'"
            alt=""
            @click="toHomePage"
          />
        </el-popover>

        <section class="menu-list">
          <i class="iconfont menu-list-icon" @click="toWhisper">消息</i>
        </section>
        <section class="menu-list">
          <i class="iconfont menu-list-icon" @click="toHomePage">收藏</i>
        </section>
        <section class="menu-list">
          <i class="iconfont menu-list-icon" @click="openNoticeDialog"
            ><el-badge :is-dot="haveNewNotice">通知</el-badge></i
          >
        </section>
        <section class="menu-list">
          <i
            class="iconfont icon-add-select menu-list-btn"
            @click="toContribution"
            >&nbsp;投稿</i
          >
        </section>
      </div>
    </div>

    <el-dialog
      :visible.sync="centerDialogVisible"
      width="40%"
      center
      :before-close="handleClose"
    >
      <span slot="title" class="dialog-title">通知</span>
      <div class="notice-list">
        <div class="notice-item" v-for="item in noticeList" :key="item.id">
          <div class="notice-title">
            <h2>{{ item.title }}</h2>
            <span>{{ item.date }}2</span>
          </div>
          <div class="notice-content">
            <p>
              {{ item.content }}
            </p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "TopNav",

  data: function () {
    return {
      searchValue: "",
      imgUrl: "",
      userId: "",

      noticeList: [],

      centerDialogVisible: false,

      haveNewNotice: false,
    };
  },

  beforeCreate() {
    this.$getuserinfo((data) => {
      this.imgUrl = data.user_pic;
      this.userId = data.id;
      // console.log(this.userId);
    });
  },

  mounted() {
    this.connect();
  },

  methods: {
    getNotice() {
      this.axios
        .get(`getNotice`)
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response.data);
            this.noticeList = response.data.oldResults;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 连接 socket
    connect() {
      // 订阅事件
      this.sockets.subscribe("getNotice", (data) => {
        console.log("getNotice ", data);
        // this.chatMessageList.unshift(data);

        this.haveNewNotice = true;
      });
    },

    handleClose(done) {
      done();
    },

    toContribution() {
      this.$router.push("/upload");
    },

    toHomePage() {
      const res = this.$router.resolve(`/homepage/${this.userId}`);
      window.open(res.href, "_blank");
    },

    toWhisper() {
      const res = this.$router.resolve(`/whisper/`);
      window.open(res.href, "_blank");
    },

    openNoticeDialog() {
      this.centerDialogVisible = true;

      this.haveNewNotice = false;

      this.getNotice();
    },

    toSearch() {
      if (this.searchValue == "") {
        return;
      }
      // console.log("1", this.searchValue);

      this.$router.push({
        name: "Search",
        params: { searchValue: this.searchValue },
      });
    },

    logout() {
      this.$confirm("是否退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "退出成功!",
          });
          localStorage.removeItem("token");
          this.$router.push("/login");
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        });
    },
  },

  sockets: {
    //客户端接收后台传输的socket事件
    getNotice: function (data) {
      // console.log(data);
    },
  },
};
</script>

<style lang="scss" >
.main[data-v-topnav123] {
  .el-input__inner {
    height: 40px;
    line-height: 40px;
    border: 1px solid #eee;
  }

  .el-dialog__body {
    overflow: auto;
  }
}

.touxiang {
  position: relative;
  width: 5vh;
  height: 5vh;
  background-position: center;

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: pointer;
    object-fit: cover;
  }

  .hide-logout {
    display: none;
    position: absolute;
    top: 105%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5vh 1vh;
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid #eee;
    text-align: center;
    cursor: pointer;
    z-index: 1000;

    &:hover {
      color: rgb(27, 126, 164);
    }
  }

  &:hover .hide-logout {
    display: block;
  }
}
</style>

<style lang="scss" scoped>
.main[data-v-topnav123] {
  position: relative;
  width: 100%;
  height: 100%;

  .search-box {
    position: absolute;
    left: 25px;
    top: calc(50% - 2vh);
    width: 28rem;
    height: 4vh;

    .search-inner {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;

      padding: 0 10px;

      .search-input {
        width: 600px;
        font-size: 18px;

        i {
          margin-right: 5px;
        }
      }
    }
  }

  .menu-box {
    position: absolute;
    right: 0;
    height: 100%;

    .menu-inner {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      padding: 0 10px;

      .menu-list {
        padding: 10px 20px;

        i {
          font-size: 2vh;
          cursor: pointer;
        }

        .menu-list-icon:hover {
          color: orange;
        }

        .menu-list-btn {
          padding: 10px 15px;
          font-size: 2vh;
          color: #333;
          background-color: #fff;
          border-radius: 8px;
          box-shadow: 0 2px 4px 0 rgb(0 0 0 / 8%);
          transition: background-color 0.5s;
        }

        .menu-list-btn:hover {
          background-color: rgb(194, 194, 194);
        }
      }
    }
  }

  .notice-list {
    height: 600px;
    // overflow: auto;
    // &::-webkit-scrollbar {
    //   display: none;
    // }

    .notice-item {
      padding: 15px 10px;
      margin-bottom: 15px;
      background-color: #fff;
      box-shadow: 0 2px 6px 0 #eee;
      border: 1px solid #eee;
      border-radius: 6px;

      .notice-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

        h2 {
          font-size: 18px;
          font-weight: 700;
          color: #000;
        }

        span {
          font-size: 16px;
          color: #757575;
        }
      }

      .notice-content {
        padding: 5px 0;

        p {
          font-size: 16px;
          color: #333;
        }
      }
    }
  }
}
</style>